<template>
  <div class="app-container">
    <base-table
      ref="baseTableRef"
      :grid-options="gridOptions"
      @cell-click="handleViewOrUpdate"
      @cell-menu="cellContextMenuEvent"
      @menu-click="contextMenuClickEvent"
      @checkbox-change="handleCheckboxChange"
      @checkbox-all="handleCheckboxAll"
    >
      <template #toolbar>
        <el-button
          size="default"
          v-if="checkBtnPerms('add')"
          icon="ele-Plus"
          type="primary"
          @click="handleAdd"
        >
          {{ $t("form.formData.add") }}
        </el-button>
        <el-button
          size="default"
          v-if="checkBtnPerms('query')"
          icon="ele-Search"
          type="default"
          @click="handleQuery"
        >
          {{ $t("form.formData.query") }}
        </el-button>
        <el-dropdown class="ml8 mr8">
          <el-button
            v-if="checkBtnPerms('import') || checkBtnPerms('export') || checkBtnPerms('download')"
            size="default"
          >
            <el-icon>
              <ele-Upload />
            </el-icon>
            {{ $t("form.formData.import") }}/{{ $t("form.formData.export") }}
            <el-icon class="el-icon--right">
              <ele-ArrowDown />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-if="checkBtnPerms('import')"
                @click="handleImport"
              >
                <el-icon>
                  <ele-Upload />
                </el-icon>
                {{ $t("form.formData.import") }}
              </el-dropdown-item>
              <el-dropdown-item
                v-if="checkBtnPerms('export')"
                @click="handleExport"
              >
                <el-icon>
                  <ele-Download />
                </el-icon>
                {{ $t("form.formData.exportData") }}
              </el-dropdown-item>
              <el-dropdown-item
                v-if="checkBtnPerms('download')"
                @click="handleDownload"
              >
                <el-icon>
                  <ele-Document />
                </el-icon>
                {{ $t("form.formData.downloadAttachment") }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-input
          v-model="inputSearch"
          :placeholder="$t('form.formData.fullTextSearch')"
          class="ml10"
          clearable
          prefix-icon="ele-Search"
          size="default"
          style="width: 200px"
          @change="handleInputSearchChange"
        />
        <transition-group
          class="inline-button-group"
          name="fade-buttons"
          tag="div"
        >
          <el-button
            v-if="checkboxIds.length && checkBtnPerms('update')"
            :key="'batchEdit'"
            class="ml8"
            icon="ele-EditPen"
            size="default"
            @click="handleBatchEdit"
          >
            {{ $t("form.formData.batchEdit") }}
          </el-button>
          <print-template-list
            v-if="checkboxIds.length && checkBtnPerms('print')"
            :key="'print'"
            ref="printTemplateListRef"
            :data-ids="checkboxIds"
            class="ml8 mr8"
          >
            <el-button
              icon="ele-Printer"
              size="default"
              @click="handleBatchPrint"
            >
              {{ $t("form.formData.batchPrint") }}
            </el-button>
          </print-template-list>
          <el-button
            v-if="checkboxIds.length && checkBtnPerms('delete')"
            :key="'delete'"
            icon="ele-Remove"
            size="default"
            type="danger"
            @click="handleDelete"
          >
            {{ $t("form.formData.delete") }}
          </el-button>
          <el-button
            v-if="checkBtnPerms('delete')"
            :key="'recycle'"
            class="ml8 mr8"
            icon="ele-Delete"
            size="default"
            @click="handleOpenDataRecycle"
          >
            {{ $t("form.formData.recycle") }}
          </el-button>
        </transition-group>
        <el-button
          v-if="formType === 4 && checkBtnPerms('examScoreAssign')"
          icon="ele-EditPen"
          size="default"
          @click="handleExamAssignScore"
        >
          {{ $t("form.formData.examScoreAssign") }}
        </el-button>
      </template>
      <template #tools>
        <div style="margin-right: 12px"></div>
      </template>
    </base-table>

    <ViewOrUpdate
      v-if="formModel && formKey"
      ref="viewOrUpdateDialogRef"
      :can-update="checkBtnPerms('update')"
      :fields="fields"
      :fixed-fields="fixedFields"
      :form-key="formKey"
      @reload="handleReloadTable"
      @open-reply="$refs.replyDrawerRef.open()"
    />
    <el-dialog
      v-model="addDialogVisible"
      v-if="addDialogVisible"
      :close-on-click-modal="false"
      :title="$t('form.formData.add')"
      width="60%"
    >
      <el-scrollbar
        height="750px"
        class="t-form-theme-wrap"
      >
        <biz-project-form
          v-if="formConfig.formKey"
          :form-config="formConfig"
          @submit="submitForm"
        />
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false">{{ $t("formI18n.all.cancel") }}</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="queryDialogVisible"
      :close-on-click-modal="false"
      class="t-dialog t-dialog--top"
      :title="$t('form.formData.query')"
      width="50%"
    >
      <data-filter
        :fields="fields"
        :form-key="formKey"
        :show-quick-filter="true"
        @filter="
          params => {
            queryParams.filter = params;
          }
        "
      />
      <template #footer>
        <div class="t-dialog__footer">
          <el-button @click="queryDialogVisible = false">{{ $t("formI18n.all.cancel") }}</el-button>
          <el-button
            type="primary"
            @click="handleConditionQueryTable"
          >
            {{ $t("formI18n.all.confirm") }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <data-import
      ref="dataImportRef"
      :form-key="formKey"
      @success="handleReloadTable"
    />
    <export-data
      ref="dataExportRef"
      :export-field-list="fields"
    />
    <reply-drawer
      ref="replyDrawerRef"
      :data-id="selectDataId"
      :form-key="formKey"
    />
    <download-file
      ref="downloadFileRef"
      :fields="fields"
      :query-params="queryParams"
    />
    <data-recycle
      :form-key="formKey"
      :columns="gridOptions?.columns"
      v-if="gridOptions.columns"
      ref="dataRecycleRef"
      @refresh="handleReloadTable"
    />
    <BatchEdit
      ref="batchEditRef"
      :auth-group-id="queryParams.authGroupId"
      :fields="fields"
      :form-key="formKey"
      :selected-rows="checkboxIds"
      @update="handleReloadTable"
    />
  </div>
</template>

<script name="DataIndex" setup>
import { provide } from "vue";
import ViewOrUpdate from "./view/ViewOrUpdate.vue";
import BaseTable from "./table/BaseTable.vue";
import { loadAsyncComponent } from "@/utils/asyncComponent";
import { formDataTableProps, useFormDataTable } from "@/views/form/data/table/useFormDataTable";

const BatchEdit = loadAsyncComponent(() => import("./table/BatchEdit.vue"));
const DataFilter = loadAsyncComponent(() => import("./filter/index.vue"));
const BizProjectForm = loadAsyncComponent(() => import("@/views/formgen/components/BizProjectForm/index.vue"));
const ReplyDrawer = loadAsyncComponent(() => import("./ReplyDrawer.vue"));
const DownloadFile = loadAsyncComponent(() => import("./table/DownloadFile.vue"));
const ExportData = loadAsyncComponent(() => import("./table/ExportData.vue"));
const PrintTemplateList = loadAsyncComponent(() => import("./table/PrintTemplateList.vue"));
const DataRecycle = loadAsyncComponent(() => import("./table/DataRecycle.vue"));
const DataImport = loadAsyncComponent(() => import("./table/import.vue"));

const props = defineProps({
  ...formDataTableProps
});

const {
  formKey,
  formConfig,
  formModel,
  queryParams,
  queryDialogVisible,
  addDialogVisible,
  selectDataId,
  checkboxIds,
  fields,
  fixedFields,
  inputSearch,
  handleConditionQueryTable,
  handleQuery,
  dataImportRef,
  handleImport,
  baseTableRef,
  dataExportRef,
  handleExport,
  downloadFileRef,
  handleDownload,
  handleExamAssignScore,
  dataRecycleRef,
  handleOpenDataRecycle,
  printTemplateListRef,
  handleBatchPrint,
  handleDelete,
  handleAdd,
  handleReloadTable,
  gridOptions,
  cellContextMenuEvent,
  viewOrUpdateDialogRef,
  handleViewOrUpdate,
  contextMenuClickEvent,
  submitForm,
  handleInputSearchChange,
  checkBtnPerms,
  formLogicData,
  dimensionConfig,
  formType,
  handleCheckboxChange,
  handleCheckboxAll,
  batchEditRef,
  handleBatchEdit
} = useFormDataTable(props);

provide("checkBtnPerms", checkBtnPerms);
provide("formLogicData", formLogicData);
provide("dimensionConfig", dimensionConfig);

defineExpose({
  checkBtnPerms
});
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
}

.inline-button-group {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.fade-buttons-enter-active {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-buttons-leave-active {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
}

.fade-buttons-enter-from,
.fade-buttons-leave-to {
  opacity: 0;
  transform: translateX(-5px);
}

.fade-buttons-move {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 添加工具栏按钮的过渡效果 */
:deep(.el-button) {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.project-form) {
  background-color: #ffffff !important;
  width: 100% !important;
}

// 使用样式隐藏最后一行无用设置 打印
:deep(.vxe-table-export--panel-table tr:last-child) {
  display: none !important;
}

@media screen and (max-width: 500px) {
  :deep(.vxe-pager) {
    padding-top: 30px !important;
  }
  :deep(.vxe-modal--box) {
    width: 100% !important;
  }
  :deep(.el-dialog__wrapper .el-dialog) {
    width: 100% !important;
  }
  :deep(.vxe-toolbar) {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
    height: 100px;

    &:last-child .el-button {
      margin-left: 0px;
    }

    .vxe-toolbar {
      margin-top: 10px;
    }
  }
}

.fixed-col-wrap {
  white-space: nowrap;
  overflow: hidden;

  .el-checkbox {
    display: block !important; /* 每个复选框一行显示 */
    overflow: hidden; /* 隐藏超出容器宽度的复选框文本 */
  }
}
</style>
